<script type="text/javascript">  	
	$(document).ready(function(){
		var projectId = sessvars.sessionObj['projectId']
		$('select#id_device_name').change(function() { 
	    		var deviceId = $(this).val();
				$.ajax({
					type: "POST",
					url: '/pmp/deviceInstance/',
					data: JSON.stringify({'projectId': projectId, 'select': 'device', 'deviceId': deviceId, 'deviceForm': $('form#deviceForm').serializeObject()}),
					success: function(data){
						$('#deviceInstanceForm').html(data)	        
					}
				});
	    	})
    	$('select#id_deviceInstance_id').change(function() { 
	    		var deviceInstanceId = $(this).val();
				var deviceId = $('select#id_device_name').find("option:selected").val()
				$.ajax({
					type: "POST",
					url: '/pmp/deviceInstance/',
					data: JSON.stringify({'projectId': projectId, 'select': 'deviceInstance', 'deviceId': deviceId, 'deviceInstanceId': deviceInstanceId, 'deviceForm': $('form#deviceForm').serializeObject(), 'deviceInstanceForm': $('form#deviceInstanceF').serializeObject()}),
					success: function(data){
						$('#deviceInstanceForm').html(data)	        
					}
				});
    	})
    	$('#id_floor').change(function(){
			var projectId = sessvars.sessionObj['projectId']
			var floor = $(this).val()
			var deviceId = $('select#id_device_name').find("option:selected").val()
			var deviceInstanceId = $('select#id_deviceInstance_id').find("option:selected").val()
			$.ajax({
				type: "POST",
				url: '/pmp/deviceInstance/',
				data: JSON.stringify({'floorId': floor, 'projectId': projectId, 'select': 'floorChange', 'deviceId': deviceId, 'deviceInstanceId': deviceInstanceId, 'deviceForm': $('form#deviceForm').serializeObject(), 'deviceInstanceForm': $('form#deviceInstanceF').serializeObject(), 'deviceIF': $('form#deviceIF').serializeObject()}),
				success: function(data){
					$('#deviceInstanceForm').html(data)
				}
			});
		});
		$('.nav-tabs').button()
    	$('#more_options').hide()
    	$('#btn_more_options').click(function(){
    		if ($(this).hasClass('active')){
    			$('#more_options').hide()
    		}
    		else{
    			$('#more_options').show()
    		}
    	})
	   })
	function addDeviceInstance(){
		var projectId = sessvars.sessionObj['projectId']
		var deviceId = $('select#id_device_name').find("option:selected").val()
		$.ajax({
			type: "POST",
			url: '/pmp/deviceInstance/',
			data: JSON.stringify({'projectId': projectId, 'select': 'add', 'deviceId': deviceId, 'deviceForm': $('form#deviceForm').serializeObject(),}),
			success: function(data){
				$('#deviceInstanceForm').html(data)	        
			}
		});
	}
	function submitDeviceInstance(){
		var projectId = sessvars.sessionObj['projectId']
		var deviceId = $('select#id_device_name').find("option:selected").val()
		var deviceInstanceId = $('select#id_deviceInstance_id').find("option:selected").val()
		try {
		var manualEntryF = $('form#manualEntry').serializeObject()
		}
		catch(e){var manualEntryF = false}
		$.ajax({
			type: "POST",
			url: '/pmp/deviceInstance/',
			data: JSON.stringify({'projectId': projectId, 'select': 'submitInstance', 'deviceId': deviceId, 'deviceInstanceId': deviceInstanceId, 'deviceForm': $('form#deviceForm').serializeObject(), 'deviceInstanceForm': $('form#deviceInstanceF').serializeObject(), 'deviceIF': $('form#deviceIF').serializeObject(), 'manualEntryF':manualEntryF}),
			success: function(data){
				$('#deviceInstanceForm').html(data)
				$('#success').fadeIn().delay(5000).fadeOut(1000);    
			}
		});
	}
	function deleteDeviceInstance(){
		var projectId = sessvars.sessionObj['projectId']
		var deviceId = $('select#id_device_name').find("option:selected").val()
		var deviceInstanceId = $('select#id_deviceInstance_id').find("option:selected").val()
		$.ajax({
			type: "POST",
			url: '/pmp/deviceInstance/',
			data: JSON.stringify({'projectId': projectId, 'select': 'deleteInstance', 'deviceId': deviceId, 'deviceInstanceId': deviceInstanceId, 'deviceForm': $('form#deviceForm').serializeObject()}),
			success: function(data){
				$('#deviceInstanceForm').html(data)
				$('#success').fadeIn().delay(5000).fadeOut(1000);    
			}
		});
	}
</script>

{% load widget_tweaks %}
<form id="deviceForm" class="form-horizontal">
	{{ deviceFD.management_form }}
	<div class="control-group">
		<label class="control-label">Select a device</label>
		<div class="controls">{{ deviceFD.name }}
			</div>
	</div>
</form>

{% if deviceInstanceFD %}
<form id="deviceInstanceF" class="form-horizontal">
	{{ deviceInstanceFD.management_form }}
	<div class="control-group">
		<label class="control-label">Select or add a device instance</label>
		<div class="controls">{{ deviceInstanceFD.id }}
			<input type="image" src="/static/admin/img/icon_addlink.gif" width="10" height="10" alt="Add Another" onclick="addDeviceInstance(); return false;">
		</div>
	</div>
</form>
{% endif %}

{% if deviceInstanceF %}
{{ deviceInstanceF.management_form }}
<h6>Add/edit device instance parameters</h6><br>
<form id="deviceIF" class="form-horizontal">
	{% for field in deviceInstanceF %}
	{% if field.label == 'Floor' or field.label == 'Start time' or field.label == 'End time' or field.label == 'Location' %}
		<div class="control-group">
			<label class="control-label">{{ field.label }}</label>
			<div class="controls">{{ field }}{% if submit %}{{ field.errors }}{% endif %}
				{% if field.label == 'Start time' %}
				 	<button id="startTimeBtn">
    					<img src="/static/pmp/img/calendar.png" alt="[calendar icon]"/>
  					</button>
				{% endif %}
				{% if field.label == 'End time' %}
					<button id="endTimeBtn">
	    				<img src="/static/pmp/img/calendar.png" alt="[calendar icon]"/>
	  				</button>
				{% endif %}
				</div>
		</div>
	{% endif %}
	{% endfor %}

	<button type="button" class="btn btn-small" data-toggle="button" id="btn_more_options" style="margin-bottom: 10px">Show/hide optional fields</button>
	<div id='more_options'>
	{% for field in deviceInstanceF %}
	{% if field.label == 'Device height' or field.label == 'Clothing level' or field.label == 'Metabolic rate' or field.label == 'Device orientation' or field.label == 'Device angle' or field.label == 'Shade position' or field.label == 'Light status' or field.label == 'Door status' or field.label == 'Notes' %}
			<div class="control-group">
				<label class="control-label">{{ field.label }}</label>
				<div class="controls">
					{{ field }}{% if submit %}{{ field.errors }}{% endif %}
					<span class="help-inline">{{field.help_text}}</span>
				</div>
			</div>
	{% endif %}
	{% endfor %}
	</div>
</form>
{% if manualEntryF %}
	<h6>Manual entry fields for this device</h6><br>
	<form id="manualEntry" class="form-horizontal">
		{{ manualEntryF.management_form }}
		{% for field in manualEntryF %}
		<div class="control-group">
			<label class="control-label">{{ field.label }}</label>
			<div class="controls">
				{{ field }}{% if submit %}{{ field.errors }}{% endif %}
				<span class="help-inline">{{field.help_text}}</span>
			</div>
		</div>
		{% endfor %}
	</form>
{% endif %}
	<p style="margin-top: 5px"><input type="submit" class="btn" value="Save" onclick="submitDeviceInstance(); return false;"/>
		<input type="submit" class="btn" value="Cancel" onclick="addDeviceInstance(); return false;"/>
		<input type="submit" class="btn" value="Delete" onclick="deleteDeviceInstance(); return false;"/>
		<span id="success"><strong>&nbsp;&nbsp;{{ saveStatus }}</strong></span></p>

<script type="text/javascript">
	$('#startTimeBtn').click(
	  	function(e) {
    		$('#id_start_time').AnyTime_noPicker().AnyTime_picker().focus();
        	e.preventDefault();
      	} 
     );
     $('#endTimeBtn').click(
	  	function(e) {
    		$('#id_end_time').AnyTime_noPicker().AnyTime_picker().focus();
        	e.preventDefault();
      	} 
     );
</script>
{% endif %}
